<!-- 折叠面板 -->
<template>
  <div class="m-collapse">
    <div class="m-collapse-head" @click="collapseBody">
      <div class="m-collapse-head-title">
        <slot name="title"></slot>
      </div>
      <i class="trg-icon" :class="{'dir-top': collapse}"></i>
    </div>
<!--    <div class="m-collapse-body" :class="{collapsing: collapsing  }" ref="cbody"  :style="styleObject" @transitionend="collapseEnd">-->
<!--      <div class="m-collapse-body-content">-->
<!--        <slot></slot>-->
<!--      </div>-->
<!--    </div>-->
    <transition name="bounce">
      <div class="m-collapse-body" v-show="collapsing">
        <div class="m-collapse-body-content">
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    props: ['collapsed'],
    data(){
      let collapse = !!this.collapsed
      return {
        collapsing: false,
        collapse ,
        styleObject: {
          height: '',
          display: collapse ? 'block': ''
        }
      }
    },
      watch: {
          collapsed(nv){
              this.collapsing = nv
          },
          collapsing(nv){
              this.$emit('change', nv, this)
          }
      },
    methods: {
        collapseExpand(nv){
            this.collapsing = nv
        },
        collapseBody(){
          this.collapsing = !this.collapsing
        },
      collapseEnd(){
        this.collapsing = false
        if(!this.collapse){
          this.styleObject.display = ''
        }
        this.styleObject.height = ''
      },
      collapseBody2(e) {
        let el = this.$refs.cbody;
        this.collapse = !this.collapse
        if(this.collapse){
          this.collapsing = true
          this.styleObject.display = 'block'
          this.$nextTick(()=>{
            this.styleObject.height = el.scrollHeight + 'px'
          })
        }else{
          this.styleObject.height = el.offsetHeight + 'px'
          requestAnimationFrame(()=>{
            requestAnimationFrame(()=>{
                this.styleObject.height = ''
                this.collapsing = true
            })
          })
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";

  .m-collapse {
    background: #fff;
    text-align: left;
    margin-bottom: 24px;
    &-head {
      height: 88px;
      padding-left: 24px;
      padding-right: 24px;
      display: flex;
      align-items: center;
      &-title {
        //overflow: hidden;
        flex: 1;
      }
      .trg-icon {
        width: 24px;
        height: 16px;
        margin-left: 20px;
        background: url("~assets/images/icon/cl-bt.png") no-repeat center center;
        background-size: contain;
        transform: rotate(0);
        transition: transform .3s ease-in-out;
        &.dir-top {
          transform: rotate(180deg);
        }
      }
    }
    &-body {
      color:#202C5B;
      line-height:48px;
      font-size: 32px;
      padding: 0 24px 0 24px;
      overflow: hidden;
      /*transition: height .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s ease-in-out;*/
      /*will-change: height;*/
      /*overflow: hidden;*/
      /*height: 0;*/
      //display: none;
      /*border-top: 1px solid #F5F5F5;*/
      &::before {
        content: '';
        height: 1px;
        width: calc(100% + 24px);
        display: block;
        background: #F5F5F5;
        margin-bottom: 24px;
      }
      /*&.collapsing {*/
      /*  position: relative;*/
      /*  height: 0;*/
      /*  overflow: hidden;*/
      /*}*/
      &-content {
        padding: 6px 0 35px 0;
      }
    }

  }

  .trg-icon {

  }

  .bounce-enter-active, .bounce-leave-active {
    transition: max-height  .6s ease;
  }


  .bounce-enter, .bounce-leave-to {
    max-height:0 ;
  }


  .bounce-enter-to,.bounce-leave {
    max-height: 5000px;
  }

</style>
